﻿<!DOCTYPE html>
<head>	
	<script type="text/javascript" src="http://craftyjs.com/release/0.4.8/crafty.js"></script>
	<style>
		body, html { margin:0; padding: 0; overflow:hidden; font-family:Arial; font-size:20px }
		#cr-stage { color:white }
	</style>
</head>
<body>
<script type="text/javascript">
	Crafty.init(300,600);

	Crafty.sprite(24,32,"font-hand-24x32.png",
	{
		EMPTY:[0,0],
		A:[1,2],
		B:[2,2],
		C:[3,2],
		D:[4,2],
		E:[5,2],
		F:[6,2],
		G:[7,2],
		H:[8,2],
		I:[9,2],
		J:[10,2],
		K:[11,2],
		L:[12,2],
		M:[13,2],
		N:[14,2],
		O:[15,2],
		P:[0,3],
		Q:[1,3],
		R:[2,3],
		S:[3,3],
		T:[4,3],
		U:[5,3],
		V:[6,3],
		W:[7,3],
		X:[8,3],
		Y:[9,3]
	});

	Crafty.c("Char",{
		init:function(){
			this.addComponent("2D,DOM").attr({w:24,h:32});
		}
	});
	Crafty.c("SpriteText",{
		init:function(){
			this.addComponent("2D,DOM");
		},
		text:function(text){
			var c;
			for(var i = 0; i<text.length;i++){
				c = Crafty.e("Char",text.charAt(i).toUpperCase());
				c.shift(i*c.w);
				this.attach(c);
 
			}
          
     
            
		}
	});
    
	var text = Crafty.e("SpriteText").text("Crafty Roxx");
</script>
</body>
</html>